<template>
	<div class="layer" v-if="show">
		<div class="layer-content">
			<div class="header">
				<h4>{{ title }}</h4>
				<span class="iconfont iconziyuan" @click="cancel"></span>
			</div>
			<div class="content">
				<!-- 如果options.type值是warning，显示感叹号的图标
                如果是succes，显示打钩的图标。
                如果是fail。显示交叉的图标 -->
				<span
					class="iconfont"
					:class="{
						iconhj1: options.type === `warning`,
						iconsuccess: options.type === `success`,
						icondeleteclosecancel: options.type === `fail`,
					}"
				></span>
				<div>{{ content }}</div>
			</div>
			<div class="buttons">
				<Button :circle="2" type="warning" size="mini" @click="cancel"
					>取消</Button
				>
				<Button :circle="2" size="mini" @click="enter">确定</Button>
			</div>
		</div>
	</div>
</template>

<script>
import Button from "../button";
export default {
	name: "hm-message",
	data() {
		return {
			// 控制组件的显示隐藏
			show: true,
			// content: "",
			// title: "",
			// options: ""
		};
	},
	components: {
		Button,
	},
	methods: {
		// 点击确定按钮触发的事件
		enter() {
			this.show = false;
			// 点击确定按钮触发promise的then函数
			this.resolve();
		},
		cancel() {
			this.show = false;
			// 点击确定按钮触发promise的catch函数
			this.reject();
		},
	},
};
</script>

<style scoped lang="less">
@import "//at.alicdn.com/t/font_2171348_qgspkkrvn4i.css";

.layer {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;

	.layer-content {
		width: 420px;
		box-sizing: border-box;
		padding: 10px;
		background: #fff;
		border-radius: 4px;
		* {
			line-height: 1.5;
		}

		.header {
			display: flex;
			justify-content: space-between;

			h4 {
				margin: 0;
				font-weight: 400;
			}
		}

		.content {
			display: flex;
			padding: 20px 0;
			color: #333;
			font-size: 14px;

			span {
				margin-right: 5px;
				font-size: 18px;
				line-height: 1.2;
			}
		}

		.buttons {
			display: flex;
			justify-content: flex-end;

			button {
				margin-left: 10px;
			}
		}
	}

	.iconhj1 {
		color: orange;
	}
	.iconsuccess {
		color: green;
	}
	.icondeleteclosecancel {
		color: red;
	}
}
</style>